// 导入 axios 
import axios from 'axios'

export default {
    namespaced: true,
    state() {

        return {
            // 保存购物车数据的数组
            list: []
        }
    },

    mutations: {

        // 封装给list赋值的方法
        // 一般情况下的命名叫updateXXXX
        updateList(state, list) {
            // 把传递过来的list保存到state的list里
            state.list = list
        },

        // 封装一个专门用来修改数量的方法
        updateGoodsCount(state, obj) {

            // 本方法依赖传递过来一个数据的id
            // 因为要通过这个数据的id来找到他在数组中的位置
            // 本方法还需要依赖别人把操作的数字传过来，才知道是+1还是-1
            // 所以现在需要两个数据，但是mutations最多只能接收1个额外的参数
            // 那我要传两个数据怎么办？？可以包成对象传进来
            // console.log('mutations触发了', obj)

            // 应该根据传递过来的id找到他在数组中的下标
            // 数组如何找到某个数据的下标，用什么方法？
            // indexOf（里面元素是基本类型的数组用）、findIndex（如果数组里是复杂类型用）
            let idx = state.list.findIndex(v => v.id === obj.id)

            // 根据下标修改对应的数据即可
            state.list[idx].goods_count = obj.value
        },

        // 封装一个专门用来修改选中状态的方法
        updateGoodsState(state, obj) {
            // 要接收两个参数：id、要修改的状态
            // 所以要包装成对象传递

            // 1. 根据id找出这个数据所在的下标
            const idx = state.list.findIndex(v => v.id === obj.id)
            // 2. 根据下标去修改对应数据的选中状态
            state.list[idx].goods_state = obj.value
        },

        // 专门用来集中修改数组里全部选中状态的方法
        // 因为他是改所有，所以没必要传id
        // 只要传一个选中状态即可
        updateAllState(state, isAll) {

            // 我们要让数组里每个元素的选中状态跟isAll有关
            // isAll是true他们都要是true，isAll是false他们都要是false
            state.list.forEach(v => v.goods_state = isAll)
        }
    },

    actions: {

        // 加载数据初始化购物车数组数据
        // actions的第一个参数代表了当前store对象
        // 里面就有state、commit等
        async initCartList(ctx) {

            // 发请求获取数据
            let res = await axios.get('https://www.escook.cn/api/cart')
            ctx.commit('updateList', res.data.list)

        }
    },

    getters: {

        isAll(state) {

            // 要依赖数组里的所有状态
            // 所有状态为true，才能结果得到true
            // 但凡有一个是false，结果就是false
            // 数组：every方法，every里如果都是返回true，结果就是true
            // 有一个是false结果就是false
            // 提示：如果看不懂这句话，去看我复习的every的html文件
            return state.list.every(v => v.goods_state)
        },

        // 累加选中的总数量
        totalCount (state) {

            // 要累加的是所有选中的商品的数量
            let sum = 0

            // 遍历数组
            state.list.forEach(v => {

                if (v.goods_state) {

                    sum += v.goods_count
                }
            })

            return sum
        },

        // 累加选中的总价格
        totalPrice (state) {

            // 要累加的是所有选中的商品的数量
            let sum = 0

            // 遍历数组
            state.list.forEach(v => {

                if (v.goods_state) {

                    sum += v.goods_price * v.goods_count
                }
            })

            return sum
        },
    }
}